<template>
  <div class="container">
    <div class="banner">
      <div class="left-banner">
        <p>取自典故：</p>
        <p>扬芒熛而绛天兮，水泫沄而涌<strong>涛</strong> 。</p>
        <p style="text-align: right"> ――《文选·张衡·思玄赋》</p>
        <p>能领兵者，谓之将才也；能将将者,谓之<strong>帅</strong>才也。</p>
        <p style="text-align: right"> ――《孙子兵法》
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </p>
      </div>
      <div class="right-banner">
        <img src="https://www.kaoshiyun.com.cn/index/style/images/banner01.gif"/>
      </div>
    </div>

    <div class="bottom">
      <div class="page-foot">
        <div class="foot-other-link">
          <li @click="impossible" style="color: #409eff;cursor: pointer">🐛 bug反馈</li>
          <li>备案号：豫ICP备2021013970号</li>
          <li></li>
        </div>
        <div class="foot-Copyright">
          <p class="Copyright-text"> Copyright © 2021 djyahui.top 涛帅考试版权所有</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    created: function () {
      if (localStorage.getItem('impossible') == 'false') {
        this.impossible()
      }
    },
    methods: {
      // 不可能有bug, 只有一种可能，用户在撒谎（手动狗头）
      // 进入伊邪那美模式
      impossible() {
        localStorage.setItem('impossible', false);
        this.$prompt("请输入\"此系统没有bug\"", '修复bug', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          if (value != '此系统没有bug') {
            this.impossible();
          } else {
            this.$notify({
              title: 'bug反馈',
              message: '感谢你的反馈，这将是我们前进的动力',
              type: 'success'
            });
            localStorage.setItem('impossible', true);
          }
        }).catch(() => {
          this.impossible();
        });
      },
    }

  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/common.scss";

  .container {
    width: 1400px;
    overflow: hidden;

    .banner {
      .left-banner {
        float: left;
        width: 400px;
        padding: 130px 0 0 200px;
      }

      .right-banner {
        float: right;
        width: 500px;
        padding-top: 40px;
        margin-right: 100px;

        img {
          width: 465px;
          height: 425px;
        }
      }

      height: 500px;
    }

    .bottom {
      text-align: center;
      margin: 0 auto;
      width: 90%;
      height: 100px;

      .page-foot {
        height: 100px;
        width: 100%;
      }

      .foot-other-link {
        height: 30px;
        margin-top: 100px;
        text-align: center;
      }

      .foot-other-link > li {
        display: inline-block;
        margin-left: 20px;
        font-size: 15px;
        color: #9EAFC0;
      }

      .foot-Copyright {
        text-align: center;
        font-size: 13px;
        color: #2c3e50;
      }

    }
  }
</style>
